<template>
	<view>
		<view @tap="study" class="filterText" :class="isShowModal ? 'active' : ''">
			{{ learnStyle || '学习方式' }}
			<u-icon name="arrow-down-fill" color="#3E3E3E" size="13"></u-icon>
		</view>

		<!-- 列表 -->
		<view class="styleBox" :class="isShowModal?'content-open':'content-close'">
			<view class="box" v-for="(item, index) in list" :key="index" @tap="studyWay(item,index)">
				<view class="titleArea">
					<view class="leftText" :class="studyID==index?'active':''">{{ item.name }}</view>
					<view class="rightText1" :class="studyID==index?'show':'rightText1'">
						<u-icon name="checkbox-mark" color="#006df7"></u-icon>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "selfSelect",
		data() {
			return {
				isShowModal: false
			};
		},
		props: {
			list: {
				default: () => [],
				type: Array
			},
		},
		methods: {
			//将列表隐藏并调数据
			studyWay(data, index) {
				//this.learnStyle = data.name;
				this.styleShow = false;
				//this.studyShow = true;
				//this.screenFrom.method = data.id;
				this.studyID = index;
				//console.log(index,"jiooo,mS")
				//this.pageStart = 1;
				//this.list = [];
				//uni.showLoading({
				//	title:"loading"
				//});
				//this.getList();
			},
		}
	}
</script>

<style lang="scss">
	.styleBox {
		position: absolute;
		width: 100%;
		top: 65rpx;
		overflow: hidden;
		overflow-y: scroll;
		height: 400rpx;
		background-color: #ffffff;
		z-index: 999;
		box-shadow: 0rpx 0rpx 15rpx 0rpx #dde4ed;

		.box {
			padding: 0 30rpx;

			.titleArea {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #bbbbbb;
				padding: 32rpx 0 24rpx 0;

				.leftText {
					font-size: 32rpx;
					font-weight: 400;
					color: #191919;
				}

				.active {
					color: #006df7;
				}

				.rightText {
					font-size: 20rpx;
					font-weight: 400;
					color: #bbbbbb;
				}

				.rightText1 {
					font-size: 25rpx;
					font-weight: 400;
					color: #bbbbbb;
					display: none;
				}

				.show {
					display: block;
				}
			}
		}
	}
</style>
